<html>
    <head>
        <meta charset="utf-8">
        <script src="../dist/claygl.js"></script>
    </head>
    <body style="margin:0px;">
        <canvas id="main"></canvas>
        <script>
            var renderer = new clay.Renderer({
                canvas: document.getElementById('main')
            });
            renderer.resize(window.innerWidth, window.innerHeight);
            var camera = new clay.camera.Perspective({
                aspect: renderer.getViewportAspect()
            });
            camera.position.set(0, 0, 10);

            var scene = new clay.Scene();
            scene.add(camera);

            var GLTFLoader = new clay.loader.GLTF();
            GLTFLoader.load("assets/models/suzanne/suzanne.gltf");
            var control = new clay.plugin.OrbitControl({
                target: camera,
                domElement: renderer.canvas
            });

            GLTFLoader.on('success', function(res) {
                suzanneGeometry = res.scene.getNode('Suzanne').geometry;
                for (var i = 0; i < 10; i++) {
                    var material = new clay.Material({
                        shader: clay.shader.library.get('clay.standard')
                    });
                    material.set('color', [0.7, 0.0, 0.0]);
                    material.set('specularColor', [0.1, 0.1, 0.1]);
                    material.set('glossiness', (i+1) / 12);
                    var mesh = new clay.Mesh({
                        material: material,
                        geometry:suzanneGeometry
                    });
                    mesh.position.set((i - 5) * 2.1, 0, 0);
                    scene.add(mesh);
                }

                var light = new clay.light.Directional();
                light.position.set(1, 4, 4);
                light.lookAt(clay.Vector3.ZERO);
                scene.add(light);

                var timeline =  new clay.Timeline();
                timeline.start();
                timeline.on('frame', function() {
                    control.update();
                    renderer.render(scene, camera);
                });
            });
        </script>
    </body>
</html>